<template>
  <section class="search-form-page">
    <el-form 
    ref="form" 
    :size="size" 
    :inline="isInline" 
    :label-position="labelPosition"
    :label-width="labelWidth" 
    :model="searchData" 
    :rules="rules">
      <!-- 循环数组 -->
      <el-form-item v-for="item in searchForm" :label="item.label" :prop="item.prop" :key="item.label">
        <!-- 普通的输入框 -->
        <el-input v-if="item.type == 'input'" v-model="searchData[item.prop]" :placeholder="item.placeholder"></el-input>
        <!-- 输入域 -->
        <el-input v-if="item.type == 'textarea'" type="textarea" v-model="searchData[item.prop]"></el-input>
        <!-- 下拉框 -->
        <el-select v-if="item.type == 'select'" v-model="searchData[item.prop]" :placeholder="item.placeholder">
          <el-option v-for="ch in item.options" :label="ch.label" :key="ch.label" :value="ch.value"></el-option>
        </el-select>
        <!-- 单选 -->
        <el-radio-group v-if="item.type == 'radio'" :label="item.label" v-model="searchData[item.prop]">
          <el-radio v-for="ch in item.options" :label="ch.label" :key="ch.label"></el-radio>
        </el-radio-group>
        <!-- 多选框 -->
        <el-checkbox-group v-if="item.type == 'checkbox'" v-model="searchData[item.prop]">
          <el-checkbox v-for="ch in item.options" :name="ch.label" :key="ch.label" :label="ch.label">{{ch.label}}</el-checkbox>
        </el-checkbox-group>
        <!-- 一个日期选择 -->
        <el-date-picker v-if="item.type == 'date'" v-model="searchData[item.prop]" type="date" :placeholder="item.placeholder"></el-date-picker>
        <!-- 时间范围的选择 -->
        <el-date-picker v-if="item.type == 'daterange'" v-model="searchData[item.prop]" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        <!-- 按钮 -->
        <el-button v-if="item.type == 'button'" @click="item.handle && item.handle()">{{item.name}}</el-button>
      </el-form-item>
    </el-form>  
  </section>
</template>

<script>
export default {
  props: {
    // 表单内组件的尺寸
    size: {type:String,default:'small'},
    labelWidth:{type:String,default:'80px'},
    // 表单是否横向
    isInline:{type:Boolean,default:true},
    // 表单每一项的对齐方式
    labelPosition:{type:String,default:'left'},
    // 表单的数组
    searchForm:{type:Array,default:()=>{},require:true},
    // 表单绑定的数据
    searchData:{type:Object,default:()=>{},require:true},
    // 表单的按钮处理
    searchHandle: {type:Array,default:()=>[]},
    // 表单的校验规则
    rules: {type:Object,default:null}
  },
  // 通过watch 自动将改变的值发射给父组件
  watch: {
    searchData: {
       handler:function(newVal) {
        // console.log('你输入的值为',newVal);
        // this.$emit('update:searchData',newVal)
     },
     deep:true
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
}
</script>

<style scoped>

</style>